<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .user {
            width: 500px;
            display: flex;
            flex-flow: row nowrap;
            border: 1px solid #cccccc;
            box-shadow: 0px 0px 10px #cccccc;
            border-radius: 12px;
            overflow: hidden;
            margin: 10px;
        }

        .user .head {
            width: 150px;
            height: 150px;
            flex-shrink: 0;
            overflow: hidden;
        }

        .user .head img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .user .info {
            flex-grow: 1;
            font-size: 14px;
            line-height: 1.7;
            letter-spacing: 2px;
            list-style: none;
            padding-left: 26px;
        }

        .user .info span:first-child {
            display: inline-block;
            width: 80px;
            text-align: justify;
            text-align-last: justify;
            color: #007bff;
        }

        .user .info i {
            font-style: normal;
            padding: 0px 10px;
            color: #aaaaaa;
        }
    </style>
    <script src="./js/vue.js"></script>
    <script type="text/x-template" id="user">
        <div class="user">
            <div class="head">
                <!-- <img :src="u.head"> -->
                <img src="./img/user.jpg">
            </div>
            <ul class="info">
                <li>
                    <span>姓名</span>
                    <i>:</i>
                    <span>{{ user.name }}</span>
                </li>
                <li>
                    <span>性别</span>
                    <i>:</i>
                    <span>{{ user.sex }}</span>
                </li>
                <li>
                    <span>出生日期</span>
                    <i>:</i>
                    <span>2021年2月1日</span>
                </li>
                <li>
                    <span>电话</span>
                    <i>:</i>
                    <span>1891000000</span>
                </li>
                <li>
                    <span>身份证号码</span>
                    <i>:</i>
                    <span>342400000000000000</span>
                </li>
            </ul>
        </div>
    </script>
</head>
<body>
    <p id="user1"></p>
    <hr>
    <p id="user2"></p>

</body>
<script>
    let UserComp = Vue.extend({
        // el:"#user1",
        template:"#user",
        // data:{
        //     user:{
        //         name:"未提供名称",
        //         sex:"未知"
        //     }
        // }

        // 在vue的组件定义默认配置和继承函数定义默认配置时
        // data 数据仓库必须是一个 function 方法且存在一个 Objetc 对象返回值
        data:function(){
            return {
                user:{
                    name:"未提供名称",
                    sex:"未知"
                }
            }
        }
    });

    // 基于extend函数创建的子类构造器是可以接受配置参数的
    //     此时的参数是提供子类差异化配置
    let userTemp1 = new UserComp({
        el:"#user1",
        data:{
            user:{
                name:"jack",
                sex:"男"
            }
        }
    });
    // userTemp1.$mount("#user1");
    let userTemp2 = new UserComp({
        el:"#user2"
    });

</script>
</html>